<template>
  <div class="page">
    <MNavbar title="店铺设置" :back="true">
      <template #right>
        <button class="btn btn-primary" @click="openEdit">编辑</button>
      </template>
    </MNavbar>

    <!-- 顶部店铺概览：头像 + 名称 + 状态 -->
    <div class="section">
      <div class="shop-header">
        <div class="avatar">S</div>
        <div class="meta">
          <div class="name">店铺名称（待录入）</div>
          <div class="sub">完善基础信息可提升用户信任度</div>
        </div>
        <div class="actions">
          <button class="btn">预览店铺</button>
          <button class="btn btn-primary">去完善</button>
        </div>
      </div>
    </div>

    <!-- 店铺信息卡 -->
    <div class="section">
      <div class="card">
        <div class="card-title">基础信息</div>
        <div class="profile-grid">
          <div class="profile-item">
            <div class="label">店铺名称</div>
            <div class="value">—（待录入）</div>
          </div>
          <div class="profile-item">
            <div class="label">联系人</div>
            <div class="value">—（待录入）</div>
          </div>
          <div class="profile-item">
            <div class="label">联系电话</div>
            <div class="value">—（待录入）</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 账号与安全 -->
    <div class="section">
      <div class="card">
        <div class="card-title">账号与安全</div>
        <div class="list">
          <div class="list-item">
            <div>
              <div class="list-item__label">登录密码</div>
              <div class="list-item__desc">已设置</div>
            </div>
            <button class="btn">修改</button>
          </div>
          <div class="list-item">
            <div>
              <div class="list-item__label">两步验证</div>
              <div class="list-item__desc">未开启</div>
            </div>
            <button class="btn btn-outline">去开启</button>
          </div>
        </div>
      </div>
    </div>

  <el-dialog v-model="visible" title="编辑店铺信息" width="520px">
    <el-form :model="form" label-width="96px">
      <el-form-item label="店铺名称">
        <el-input v-model="form.name" placeholder="请输入店铺名称" />
      </el-form-item>
      <el-form-item label="联系人">
        <el-input v-model="form.contact" placeholder="请输入联系人" />
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input v-model="form.phone" placeholder="请输入联系电话" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible=false">取消</el-button>
        <el-button type="primary" :loading="saving" @click="save">保存</el-button>
      </div>
    </template>
  </el-dialog>

  </div>
</template>

<script setup>
import MNavbar from '@/components/MNavbar.vue'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'

const visible = ref(false)
const saving = ref(false)
const form = reactive({ name:'', contact:'', phone:'' })

function openEdit(){ visible.value = true }
async function save(){
  saving.value = true
  try{
    // 这里仅做UI演示，不改动后端；如需联调，调用相应接口
    await new Promise(r=>setTimeout(r, 600))
    visible.value = false
    ElMessage.success('保存成功')
  }catch(e){
    ElMessage.error(e?.message||'保存失败')
  }finally{ saving.value=false }
}
</script>

<style scoped>
/* 顶部概览 */
.shop-header{ display:flex; align-items:center; gap:16px; padding:16px; background:linear-gradient(90deg,#eff6ff,#f8fafc); border:1px solid var(--border-color); border-radius:12px }
.avatar{ width:48px; height:48px; border-radius:12px; background:linear-gradient(135deg,#2563eb,#0ea5e9); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800 }
.meta .name{ font-weight:700 }
.meta .sub{ color: var(--muted-text); font-size:12px }
.actions{ margin-left:auto; display:flex; gap:8px }

/* 信息栅格 */
.profile-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px }
.profile-item{ border:1px solid var(--border-color); border-radius: 12px; padding: 14px; background:#fff }
.profile-item .label{ color: var(--muted-text); font-size: 12px }
.profile-item .value{ margin-top: 6px; font-weight: 600 }

/* 列表条目右侧操作按钮布局 */
.list{ display:flex; flex-direction:column }
.list-item{ display:flex; align-items:center; justify-content:space-between; border-bottom:1px dashed var(--border-color); padding:12px 0 }
.list-item:last-child{ border-bottom:none }
.btn{ height:32px; padding:0 12px; border-radius:8px; border:1px solid var(--border-color); background:#fff; cursor:pointer }
.btn-outline{ background:#fff }
.btn-primary{ background:#2563eb; color:#fff; border-color:#2563eb }

@media (max-width: 1024px){ .profile-grid{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 768px){ .profile-grid{ grid-template-columns: 1fr } }
</style>

